<template>
  <div class="container">
    <el-card>
      <el-form
        ref="uploadruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        size="small"
      >
        <el-form-item label="商品标题:" prop="title" size="small">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入商品标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品分类:" prop="category">
          <el-select
            v-model="ruleForm.category"
            placeholder="请选择商品分类"
            @change="getbrand"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in goodsCategoryList"
              :key="item.id"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="库存量:" prop="inventory">
          <el-input-number
            :min="1"
            controls-position="right"
            v-model.number="ruleForm.inventory"
          ></el-input-number>
          <span>件</span>
        </el-form-item>
        <el-form-item label="价格:" prop="price">
          <el-input-number
            :min="1"
            controls-position="right"
            v-model.number="ruleForm.price"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="品牌:" prop="brand">
          <el-select
            v-model="ruleForm.brand"
            placeholder="请选择品牌"
            no-data-text="请先选择分类"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in goodsBrandList"
              :key="item.id"
              >{{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="商品主图:" prop="goods_image">
          <!-- action="http://192.168.101.133:3000/upload/goods" -->
          <el-upload
            name="goods"
            limit="1"
            list-type="picture-card"
            class="avatar-uploader"
            action="http://192.168.101.63:3000/upload/goods"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="ruleForm.goods_image"
              :src="ruleForm.goods_image"
              class="avatar"
              width="0"
            />
            <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="轮播图:" prop="banner">
          <!--  action="http://192.168.0.197:3000/upload/goodsList" -->
          <el-upload
            name="goodsList"
            limit="5"
            list-type="picture-card"
            class="avatar-uploader"
            action="http://192.168.101.63:3000/upload/goodsList"
            :on-success="handlePictureCardPreview"
          >
            <el-icon><plus /></el-icon>
          </el-upload>
          <!-- <el-dialog v-model="dialogVisible">
          <img width="0" :src="ruleForm.banner" alt="" />
        </el-dialog> -->
        </el-form-item>
        <el-form-item label="上架状态:" prop="putaway_status">
          <el-radio-group v-model="ruleForm.putaway_status">
            <el-radio label="1">上架</el-radio>
            <el-radio label="0">不上架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品详情:" prop="desc" style="width: 100%">
          <VueEditor
            :content="ruleForm.desc"
            @getWangEditorValue="getWangEditorValue"
          />
        </el-form-item>
        <el-form-item style="width: 100%" class="jsb">
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="width: 30%"
            >立即发布</el-button
          >
          <el-button @click="resetForm('ruleForm')" style="width: 30%"
            >暂不发布</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref, onBeforeMount, defineComponent, h } from "vue";
import { Plus } from "@element-plus/icons";
import { get, post } from "@/api/api";
import { useStore } from "vuex";
import VueEditor from "@/components/VueEditor/index";
import { ElNotification, ElMessageBox } from "element-plus";

export default defineComponent({
  components: {
    VueEditor,
    Plus,
  },
  setup() {
    const uploadObj = {
      title: "", // 标题
      category: "", // 商品id
      inventory: "", // 库存量
      price: "", // 价格
      brand: "", // 商品品牌
      goods_image: "", // 商品主图
      banner: [], // 轮播图
      putaway_status: "0",
      desc: "", // 详情
    };
    const store = useStore();
    const ruleForm = ref({ ...uploadObj });
    // 表单验证
    const rules = ref({
      title: [
        {
          required: true,
          message: "请输入商品名称",
          trigger: "blur",
        },
      ],
      category: [
        {
          required: true,
          message: "请选择商品分类",
          trigger: "change",
        },
      ],
      inventory: [
        {
          required: true,
          message: "请选择库存数量",
          trigger: "blur",
        },
      ],
      price: [
        {
          required: true,
          message: "请填写商品价格",
          trigger: "blur",
        },
      ],
      brand: [
        {
          required: true,
          message: "请选择商品品牌",
          trigger: "change",
        },
      ],
      goods_image: [
        {
          required: true,
          message: "请选择商品的主要图标",
          trigger: "change",
        },
      ],
      banner: [
        {
          required: true,
          message: "请选择2张以上商品的图片",
          trigger: "change",
        },
      ],
      putaway_status: [
        {
          required: true,
          message: "请选择商品是否要上架",
          trigger: "change",
        },
      ],
      desc: [
        {
          required: true,
          message: "请填写商品的详情",
          trigger: "blur",
        },
      ],
    });
     // 新增一个Dom验证表单
    const uploadruleForm = ref();
    // 商品分类列表
    const goodsCategoryList = ref([]);
    // 获取商品品牌
    const goodsBrandList = ref([]);

    // 点击提交
    const submitForm = () => {
      uploadruleForm.value.validate(async (valid) => {
        if (valid) {
          ruleForm.value.found_id = store.state.userinfo.user_id;
          const res = await post("/goods/add_goods", ruleForm.value);
          if (res.code == 0) {
            ElNotification({
              title: res.msg,
              message: h(
                "span",
                { style: "color: teal" },
                "恭喜你,完成了今日发布商品啦"
              ),
            });
          }
        } else {
          return false;
        }
      });
    };
    // 重置数据
    const resetForm = (formName) => {
      // 提示
      ElMessageBox.confirm("确认现在不发布,数据将不会保存?", "温馨提示", {
        confirmButtonText: "暂不保存",
        cancelButtonText: "关闭",
        type: "warning",
      }).then(() => {
        if (formName == "uploadruleForm") {
          uploadruleForm.value.resetFields();
        }
      });
    };
    // (单张)
    // 上传图片
    const handleAvatarSuccess = (res, file) => {
      ruleForm.value.goods_image = file.response.path;
    };
    // (多张)
    const handlePictureCardPreview = (response, file, fileList) => {
      ruleForm.value.banner = fileList.map((item) => item.response.path);
    };
    // 获取品牌列表
    const getbrand = async () => {
      // // 获取品牌
      const res = await get("goods/brand", { id: ruleForm.value.category });
      if (res.code == 0) {
        goodsBrandList.value = res.result;
      }
    };
    // 富文本的内容
    const getWangEditorValue = (val) => {
      ruleForm.value.desc = val;
    };
    // 页面一加载就获取商品分类
    onBeforeMount(async () => {
      // 获取商品
      const res = await get("/goods/category");
      if (res.code == 0) {
        goodsCategoryList.value = res.result;
      }
    });
    return {
      getbrand,
      submitForm,
      handleAvatarSuccess,
      handlePictureCardPreview,
      rules,
      ruleForm,
      getWangEditorValue,
      uploadruleForm,
      goodsBrandList,
      goodsCategoryList,
      resetForm,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 60%;
  display: flex;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  height: 178px;
  text-align: center;
}
</style>
